<template>
  <div>
    <div class="search-bar">
      <!-- vant布局，24栏布局 -->
      <van-row gutter="5">
        <!-- span:每列占据多少像素 -->
        <van-col span="3">
          <img :src="locationIcon" width="80%" class="location-icon" />
        </van-col>
        <van-col span="16">
          <input type="text" class="search-input" />
        </van-col>
        <van-col span="5">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>

    <!--swiper 轮播-->
    <div class="swiper-area">
      <van-swipe :autoplay="1500">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- type bar 类型栏-->
    <div class="type-bar">
      <div v-for="(cate,index) in category" :key="index">
        <img v-lazy="cate.image" width="90%" />
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>

    <!-- adbanner area 广告-->
    <div>
      <img v-lazy="adBanner" width="100%" />
    </div>

    <!-- Recomend goods area 商品推荐-->
    <div class="recommend-area">
      <div class="recommend-title">商品推荐</div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in recommendGoods" :key="index">
            <div class="recommend-item">
              <img :src="item.image" width="80%" />
              <div>{{item.goodsName}}</div>
              <div>￥{{item.price | moneyFilter}}(￥{{item.mallPrice | moneyFilter}})</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <!-- 学习swiper插件
    <swiperDefault/>
    <swiperDefault2/>
    <swiperDefault3/>
    <swiperText/>-->

    <!--floor one area 首页楼层布局-->
    <!-- 进行静态组件的封装，封装到floorComponent.vue组件里 -->
    <floorComponent :floorData='floor1' :floorTitle='floorName.floor1'/>
    <floorComponent :floorData='floor2' :floorTitle='floorName.floor2'/>
    <floorComponent :floorData='floor3' :floorTitle='floorName.floor3'/>

    <!--Hot Area 热卖商品-->
    <div class="hot-area">
    <div class="hot-title">热卖商品</div>
    <div class="hot-goods">
        <van-list>
            <van-row gutter="20">
                <van-col span="12" v-for="( item, index) in hotGoods" :key="index">
                    <!-- 封装goodslnfoComponent.vue静态组件 -->
                    <goodsInfoComponent :goodsImage='item.image' :goodsName='item.name' :goodsPrice='item.price'
                    :goodsId='item.goodsId' />
                </van-col>
            </van-row>
        </van-list>
    </div>
</div>

  </div>
</template>

<script>
import axios from "axios";
// 按需从github引入swiper组件，不用vant里的轮播组件
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import floorComponent from '@/components/component/floorComponent.vue'
import { toMoney } from '@/filter/moneyFilter.js'//引入模块moneyFilter.js文件，作用过滤器。
import goodsInfoComponent from '@/components/component/goodsInfoComponent.vue'
import url from '@/serviceAPI.config.js'//引入服务接口API配置文件serviceAPI.config.js
export default {
  components: { swiper, swiperSlide,floorComponent,goodsInfoComponent},
  data() {
    return {
      //使用require防止项目打包上线后图片加载不出来。
      locationIcon: require("../../assets/images/location.png"),
      bannerPicArray: [],
      category: [],
      adBanner: "",
      recommendGoods: [],
      swiperOption: {
        slidesPerView: 3 //设置swiper插件的每个页面展示3个图片。
      },

      floor1: [],
      floor2:[],
      floor3:[],
      floorName:{},

      hotGoods:[],
    };
  },
  filters:{
        //过滤器保留价钱的小数点后两位数字
        moneyFilter(money){
          //过滤很简单,就是将文件引入进来调用函数就可以了。
          return toMoney(money)
        }
  },
  created() {
    axios({
      method: "get",
      url:url.getShopingMallInfo
    })
      .then(res => {
        if (res.status == 200) {
          this.category = res.data.data.category; //类型栏数据

          this.adBanner = res.data.data.advertesPicture.PICTURE_ADDRESS; //广告数据

          this.bannerPicArray = res.data.data.slides; //轮播数据

          this.recommendGoods = res.data.data.recommend; //商品推荐数据

          this.floor1 = res.data.data.floor1; //首页楼层数据
          this.floor2 = res.data.data.floor2
          this.floor3 = res.data.data.floor3
          this.floorName = res.data.data.floorName;

          this.hotGoods = res.data.data.hotGoods;//引入热卖商品数据
          

        }
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height: 2.2rem;
  overflow: hidden;
  /* 顶部有margin把它隐藏 */
}
.search-input {
  width: 100%;
  height: 1.3rem;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid #fff !important ;
  background-color: #e5017d;
  color: #fff;
  font-size: 0.8rem;
}
.location-icon {
  padding-top: 0.25rem;
  padding-left: 0.4rem;
}
.swiper-area {
  /* vant的swiper组件自带的浮动，把浮动清除掉。 */
  clear: both;
  /*懒加载图片需固定最大高度，隐藏超出部分*/
  max-height: 10rem;
  overflow: hidden;
}

.type-bar {
  background-color: #fff;
  margin: 0 0.5rem 0.5rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 14px;
  /* flex布局 */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar div {
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
}
.recommend-area {
  background-color: #fff;
  margin-top: 0.3rem;
}
.recommend-title {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.2rem;
  color: #e5017d;
}
.recommend-body {
  border-bottom: 1px solid #eee;
}

.recommend-item {
  width: 99%;
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
}
.floor-anomaly {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.floor-anomaly div {
  width: 10rem;
  /* 两个div并排 */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.floor-one {
  border-right: 1px solid #ddd;
}
.floor-two {
  border-bottom: 1px solid #ddd;
}
.floor-rule{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #fff;
}
.floor-rule div{
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  width: 10rem; 
  border-bottom: 1px solid #ddd;
}
.floor-rule div:nth-child(odd){
     border-right: 1px solid #ddd;
}
.hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }
.hot-goods{
    height: 130rem;
    overflow: hidden;
    background-color: #fff;
  
}
</style>
